Fix avoid-overlap hover label algo when "too close" label get filtered out by etpinard · Pull Request #3645 · plotly/plotly.js

etpinard · 2019-03-18T20:06:04Z

before: https://codepen.io/antoinerg/pen/MxEjeo

after: https://codepen.io/etpinard/pen/LaBpYm

In this example, we enter this block:

Lines 872 to 877 in fc236e2

    
           // remove the "close but not quite" points 
        
           // because of error bars, only take up to a space 
        
           hoverData = hoverData.filter(function(d) { 
        
               return (d.zLabelVal !== undefined) || 
        
                   (d[commonAttr] || '').split(' ')[0] === t00; 
        
           });

where hoverData gets filtered down showing two visible hover labels, but isn't updated for the downstream hoverAvoidOverlaps call where the "old" (longer) hoverData array is used here:

plotly.js/src/components/fx/hover.js

Lines 1099 to 1114 in fc236e2

    
           var pointgroups = hoverData.map(function(d, i) { 
        
               var axis = d[ax]; 
        
               var axIsX = axis._id.charAt(0) === 'x'; 
        
               var rng = axis.range; 
        
               if(!i && rng && ((rng[0] > rng[1]) !== axIsX)) axSign = -1; 
        
               return [{ 
        
                   i: i, 
        
                   traceIndex: d.trace.index, 
        
                   dp: 0, 
        
                   pos: d.pos, 
        
                   posref: d.posref, 
        
                   size: d.by * (axIsX ? YFACTOR : 1) / 2, 
        
                   pmin: 0, 
        
                   pmax: (axIsX ? fullLayout.width : fullLayout.height) 
        
               }]; 
        
           })

cc @plotly/plotly_js

... that way when some hover data pts are filtered out (e.g. when they are too close together in compare mode), the fix-overlap algo still works.

antoinerg · 2019-03-18T20:18:29Z

Thank you for the fix @etpinard ! It looks good to me 💃

loop over hover label (not hover data) when fixing overlaps

35b3b5d

... that way when some hover data pts are filtered out (e.g. when they are too close together in compare mode), the fix-overlap algo still works.

etpinard added bug something broken status: reviewable labels Mar 18, 2019

etpinard merged commit 0588483 into master Mar 18, 2019

etpinard deleted the hover-label-overlap-filtered-out branch March 18, 2019 20:21

This was referenced Jun 14, 2019

"Uncaught TypeError" during hover over while zoomed into boxplot #3962

Closed

More zoomed-in box/violin hover labels fixes #3965

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Fix avoid-overlap hover label algo when "too close" label get filtered out#3645

Fix avoid-overlap hover label algo when "too close" label get filtered out#3645
etpinard merged 1 commit into
masterfrom
hover-label-overlap-filtered-out

etpinard commented Mar 18, 2019

Uh oh!

antoinerg commented Mar 18, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	// remove the "close but not quite" points
	// because of error bars, only take up to a space
	hoverData = hoverData.filter(function(d) {
	return (d.zLabelVal !== undefined) \|\|
	(d[commonAttr] \|\| '').split(' ')[0] === t00;
	});

	var pointgroups = hoverData.map(function(d, i) {
	var axis = d[ax];
	var axIsX = axis._id.charAt(0) === 'x';
	var rng = axis.range;
	if(!i && rng && ((rng[0] > rng[1]) !== axIsX)) axSign = -1;
	return [{
	i: i,
	traceIndex: d.trace.index,
	dp: 0,
	pos: d.pos,
	posref: d.posref,
	size: d.by * (axIsX ? YFACTOR : 1) / 2,
	pmin: 0,
	pmax: (axIsX ? fullLayout.width : fullLayout.height)
	}];
	})

Uh oh!

Uh oh!

Conversation

etpinard commented Mar 18, 2019

Uh oh!

antoinerg commented Mar 18, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants